<template>
	<view class="header_content">
		<view>
			<slot name="left">
				<!-- <u-icon v-if="showBack" style="background: #fff;" name="arrow-left" size="20" @click="handleBack"></u-icon> -->
				<text v-if="showBack" class="iconfont icon-right" style="font-size: 60rpx; font-weight: 700;" @click="handleBack" ></text>
			</slot>
		</view>

		<view class="center">
			<view class="title">
				<slot name="title">旭春灯饰下单平台</slot>
			</view>
			<!-- <view class="name">弘兆信息技术有限公司</view> -->
		</view>

		<view class="right">
			<view class="current">
				欢迎 {{ author }}
			</view>

			<!-- <button  @click="handleLeave">
				<text class="iconfont icon-tuichu"></text>
			</button> -->

			<text @click="handleLeave" class="iconfont icon-tuichu"></text>

			<!-- 退出模态框 -->
			<u-modal 
				:show="quitModal" 
				title="确定要退出吗?" 
				:showCancelButton="true" 
				:closeOnClickOverlay="true" 
				@confirm="handleConfirm"
				@cancel="quitModal = false"
				@close="quitModal = false"
			></u-modal>

			<!-- 弹出框-修改密码 -->
			<u-popup :show="show" mode="center" @close="show = false" >
				<view style="width: 1000rpx; height: 660rpx; padding: 100rpx 40rpx; display: flex; flex-direction: column; justify-content: space-between;">
					<view>
						<view style="display: flex; justify-content: center; align-content: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
							<text style="font-size: 40rpx; font-weight: 700;">原密码：</text>
							<input  style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style="display: flex; justify-content: center; align-content: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
							<text style="font-size: 40rpx; font-weight: 700;">新密码：</text>
							<input style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
					</view>

					<view class="bottom_btn">
						<u-button @click="handleCancel">取消</u-button>
						<u-button @click="handleCancel">确定</u-button>
					</view>
				</view>
			</u-popup>

		</view>

		
	</view>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		data() {
			return {
				height: 0,
				quitModal: false, // 退出模态框
				show: false, // 修改密码弹出框
				showBack: true, // 是否显示 后退按钮
			}
		},
		onLoad() {
		},
		computed: {
			...mapState([ 'author' ]),
		},
		methods: {
			handleCancel() {
				console.log('== 取消')
			},
			handleBack() {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				console.log('==  prevPage', prevPage.route)
				if ('pages/enterClass/enterClass' == prevPage.route) {
					this.showBack = false
					console.log('prevPage    111', this.showBack)
				} else {
					this.showBack = true
					console.log('prevPage     2222', this.showBack)
				}
				uni.navigateBack({
					 delta: 1,
					 success: (e) => {
						if ('pages/dingdanTable/dingdanTable' == prevPage.route) {
							prevPage.$vm.reload(); // 页面回退是刷新
						}
					 }
				});
			},
			handleAccount() {
				this.height = this.height ? 0 : 80
			},
			handleConfirm() {
				this.quitModal = false;
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('token');
				uni.reLaunch({
					url: '../../pages/login/login'
				});
			},
			handleLeave() {
				this.quitModal = true
				this.handleAccount()
			},
		}
	}
</script>

<style lang="less" scoped>
.header_content{
	background: #0a5ddf;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50rpx 20rpx 20rpx;
	height: 88rpx;
	z-index: 999;
	color: #fff;

	.center {
		display: flex;
		align-items: flex-end;
		padding-left: 300rpx;
		.title {
			font-size: 50rpx;
			font-weight: 700;
			letter-spacing: 10rpx;
			text-shadow: 
					12rpx 12rpx 6rpx rgba(0, 0, 0, 0.5), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
		}
		.name {
			font-size: 28rpx;
			font-weight: 700;
			margin-left: 40rpx;
			letter-spacing: 6rpx;
			text-shadow: 
					6rpx 6rpx 6rpx rgba(0, 0, 0, 0.5), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
		}
	}

	.right {
		font-size: 40rpx;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 80rpx;
			margin-right: 20rpx;
			color: #f59a23;
			color: #fff;
		} 

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			// border: 1rpx solid #f59a23;
			font-size: 100rpx;
			color: #f59a23;
			margin-right: 30rpx;
		}
		.current {
			position: relative;
			margin-right: 20rpx;
			text-shadow: 
					6rpx 6rpx 6rpx rgba(0, 0, 0, 0.5), /* 第一层阴影 */
					-4rpx -4rpx 8rpx rgba(255, 255, 255, 0.5); /* 第二层阴影 */
		}

		.select {
			position: absolute;
			background: #fff;
			overflow: hidden;
			transition: all .3s;
			// width: 100%;
			z-index: 11;
			box-shadow: 12rpx 16rpx 10rpx rgba(0, 0, 0, 0.1);
			.item {
				padding: 10rpx 20rpx;
				border-bottom: 1rpx solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.bottom_btn {
		display: flex;
		justify-content: space-around;
		margin-top: 80rpx;
		
		button {
			width: 400rpx;
			height: 100rpx;
			background: #169bd5;
			color: #fff;
			margin: 0;
			font-weight: 500;
			font-size: 60rpx;
		}
	}
}
</style>
